<template>
  <div>
    <div class="app-container">
      <div class="page_header">{{ID?'编辑':'添加'}}区域</div>
      <el-row :gutter="15">
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="230px">
          <el-col :span="12">
            <el-row>
              <el-col :span="24">
                <el-form-item label="省市区" prop="areaAddress">
                  <CityPicker ref="cityPicker" size="small" clearable placeholder="请选择" v-model="formData.areaAddress" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="支付定金" prop="paymentType">
                  <el-radio-group v-model="formData.paymentType" size="medium">
                    <el-radio v-for="(item, index) in paymentTypeOptions" :key="index" :label="item.value" :disabled="item.disabled">{{item.label}}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="24" v-if="formData.paymentType === 'true'">
                <el-form-item label="定金金额" prop="amount">
                  <el-input-number v-model="formData.amount" placeholder="定金金额" :step="1" :precision="2"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="方案费用付款方式" prop="paymentType">
                  <el-radio-group v-model="formData.payType" size="medium">
                    <el-radio @change="payTypeChange" v-for="(item, index) in payTypeOptions" :key="index" :label="item.value" :disabled="item.disabled">{{item.label}}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="24" v-if="formData.payType=='2'" >
                <el-form-item label="分期方案">
                  <el-form :inline="true" class="demo-form-inline">
                    <div v-for="(item, index) in  formData.payTypeJson">
                      <el-form-item :label="item.name" style="margin-top: 10px">
                        <el-input onkeyup="value=value.replace(/[^\d]/g,'')" v-model="item.value" :maxlength="2"></el-input>
                      </el-form-item>
                    </div>
                  </el-form>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="额外费用满" prop="extraCosts">
                  <el-input-number v-model="formData.extraCosts" placeholder="额外费用满" :step="1" :precision="2"></el-input-number>
                </el-form-item>
              </el-col>
<!--              <el-col :span="24">-->
<!--                <el-form-item label="经销商额外费用提成比例(%)" prop="dealerRate">-->
<!--                  <el-input-number v-model="formData.dealerRate" placeholder="经销商额外费用提成比例(%)" :step="1" :precision="2"></el-input-number>-->
<!--                </el-form-item>-->
<!--              </el-col>-->
              <el-col :span="24">
                <el-form-item label="服务人员额外费用提成比例(%)" prop="serviceRate">
                  <el-input-number v-model="formData.serviceRate" placeholder="服务人员额外费用提成比例(%)" :step="1" :precision="2"></el-input-number>
                </el-form-item>
              </el-col>
<!--              <el-col :span="24">-->
<!--                <el-form-item label="总部额外费用提成比例(%)" prop="headquartersRate">-->
<!--                  <el-input-number v-model="formData.headquartersRate" placeholder="总部额外费用提成比例(%)" :step="1" :precision="2"></el-input-number>-->
<!--                </el-form-item>-->
<!--              </el-col>-->
            </el-row>
          </el-col>
          <el-col v-for="type of types" :key="type.value" :span="24">
            <div style="font-size: 18px;line-height: 38px;color: #333;font-weight: 700;">{{type.name}}</div>
            <el-row v-for="property of propertys" :key="property.value">
              <div style="float:left;width:150px;line-height: 38px;color: #606266;font-weight: 700;">{{property.name}}</div>
              <el-col :span="6">
                <el-form-item
                  label-width="100px"
                  label="5年质保"
                  :prop="`areaPriceList[${getInputIndex(type,property)}].qa5Price`"
                  :rules="{
                 pattern: /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/, message: '格式有误', trigger: 'blur'
                 }"
                >
                  <el-input
                    v-model="formData.areaPriceList[getInputIndex(type,property)].qa5Price"
                    placeholder="请输入5年质保"
                    :maxlength="20"
                    clearable
                    :style="{width: '100%'}"
                  >
                    <template slot="append">元/㎡</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item
                  label-width="100px"
                  label="10年质保"
                  :prop="`areaPriceList[${getInputIndex(type,property)}].qa10Price`"
                  :rules="{
                 pattern: /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/, message: '格式有误', trigger: 'blur'
                 }"
                >
                  <el-input
                    v-model="formData.areaPriceList[getInputIndex(type,property)].qa10Price"
                    placeholder="请输入10年质保"
                    :maxlength="20"
                    clearable
                    :style="{width: '100%'}"
                  >
                    <template slot="append">元/㎡</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item
                  label-width="100px"
                  label="15年质保"
                  :prop="`areaPriceList[${getInputIndex(type,property)}].qa15Price`"
                  :rules="{
                 pattern: /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/, message: '格式有误', trigger: 'blur'
                 }"
                >
                  <el-input
                    v-model="formData.areaPriceList[getInputIndex(type,property)].qa15Price"
                    placeholder="请输入15年质保"
                    :maxlength="20"
                    clearable
                    :style="{width: '100%'}"
                  >
                    <template slot="append">元/㎡</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="24">
            <el-form-item size="large">
              <el-button type="primary" :disabled="pending" @click="submitForm">提交</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </div>
  </div>
</template>

<script>
import CityPicker from '@/components/cityPicker'
import { getAreaDetail, addArea, updateArea } from '@/api/area/index'
const PROPERTYS = [
  {
    name: '服务人员外聘工价',
    value: 1
  },
  {
    name: '经销商外聘工价',
    value: 2
  },
  {
    name: '服务人员无料施工价',
    value: 3
  },
  {
    name: '经销商无料施工价',
    value: 4
  }
]
const TYPES = [
  {
    name: '防水工价',
    value: 1
  },
  {
    name: '电工工价',
    value: 2
  },
  {
    name: '给排水工价',
    value: 3
  },
  {
    name: '墙体防水',
    value: 4
  },
  {
    name: '墙固地固',
    value: 5
  }
]
export default {
  name: 'Areaedit',
  components: {
    CityPicker
  },
  data() {
    const areaPriceList = []
    TYPES.forEach((type) => {
      PROPERTYS.forEach((property) => {
        areaPriceList.push({
          type: type.value,
          property: property.value,
          qa5Price: '',
          qa10Price: '',
          qa15Price: ''
        })
      })
    })
    return {
      propertys: Object.freeze(PROPERTYS),
      types: Object.freeze(TYPES),
      formData: {
        areaAddress: [],
        paymentType: 'true',
        amount: undefined,
        dealerRate: undefined,
        serviceRate: undefined,
        headquartersRate: undefined,
        areaPriceList,
        payType:'1',
        payTypeJson:[{
          name:'第一期',
          value:50
        },{
          name:'第二期',
          value:30
        },{
          name:'第三期',
          value:20
        }],
        extraCosts:100
      },
      rules: {
        areaAddress: [
          {
            required: true,
            type: 'array',
            message: '请选择',
            trigger: 'change'
          }
        ],
        paymentType: [
          {
            required: true,
            message: '支付定金不能为空',
            trigger: 'change'
          }
        ],
        amount: [
          {
            required: true,
            message: '定金金额不能为空',
            trigger: 'change'
          }
        ],
        dealerRate: [],
        serviceRate: [],
        headquartersRate: []
      },
      paymentTypeOptions: [
        {
          label: '是',
          value: 'true'
        },
        {
          label: '否',
          value: 'false'
        }
      ],
      //
      payTypeOptions: [
        {
          label: '一次性',
          value: '1'
        },
        {
          label: '分期',
          value: '2'
        }
      ],
      pending: false
    }
  },
  computed: {
    ID() {
      return this.$route.query.id
    }
  },
  async created() {},
  async mounted() {
    if (this.ID) {
      try {
        const res = await getAreaDetail(this.ID)
        const { province, city, area, ...other } = res.data
        this.formData = Object.assign(this.formData, { ...other })
        if(!this.formData.payTypeJson){
          this.formData.payTypeJson=[]
        }else{
          this.formData.payTypeJson=JSON.parse(this.formData.payTypeJson);
        }
        // 地址
        this.formData.areaAddress = this.$refs.cityPicker.getTextToValue({ province, city, area })
      } catch (error) {
        console.log(error)
      }
    } else {
      this.resetForm()
    }
  },
  methods: {
    getInputIndex(type, property) {
      return (type.value - 1) * this.propertys.length + property.value - 1
    },
    payTypeChange(object){
      if(object=='1') {
        this.formData.payTypeJson=[{
          name:'第一期',
          value:100
        }]
      }else{
        this.formData.payTypeJson=[{
          name:'第一期',
          value:50
        },{
          name:'第二期',
          value:30
        },{
          name:'第三期',
          value:20
        }]
      }
    },
    submitForm() {
      this.$refs['elForm'].validate(async (valid) => {
        if (!valid) return
        //
        const cityObj = this.$refs.cityPicker.getValueTextObj(this.formData.AreaAddress)
        const { areaAddress, ...other } = this.formData
        const fetchData = {
          ...other,
          ...cityObj
        }
        //校验是否分期，如分期查看是否超过100%
        if(this.formData.payType=='2'){
         let count=0;
         this.formData.payTypeJson.forEach(function (item,index) {
            count+=item.value;
         })
          console.log(count);
          if(count!=100){
            this.msgError("分期比例总和必须是100%");
            return ;
          }
        }
        // console.log(fetchData)
        // return
        this.pending = true
        try {
          const fetchFn = this.ID ? updateArea : addArea
          const res = await fetchFn({
            ...fetchData
          })
          if (res.code === 200) {
            this.msgSuccess(res.msg)
            this.$closeNowTagsView()
          }
        } catch (error) {
          console.log(error)
        }
        this.pending = false
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    }
  }
}
</script>

<style lang='scss'>
</style>


